<template>
    <swiper :options="swiperOption" ref="mySwiper" class="banners" >
        <swiper-slide v-for="(item, index) in imgList" :key="index">
            <img class="banners-image" v-bind:src="item.tupian">
        </swiper-slide>
        <div class="swiper-pagination" slot="pagination"></div>
    </swiper>
</template>

<script>

    export default {
        name: "Banners",
        components:{

        },
        props: {
            imgList: Array
        },
        watch: {
            imgList: {
                immediate: true,  // 这是为了第一次拿到值的时候就对sd进行监听
                handler( val, oldval ) {
                }
            }
        },
        data() {
            return {
                swiperOption:{
                    speed: 500,
                    autoplay:true,
                    pagination: {
                        el: '.swiper-pagination'
                    },
                    preloadImages:true,
                    grabCursor:true,
                }
            }
        },
        computed: {
            swiper() {
                return this.$refs.mySwiper.swiper
            }
        },
        mounted() {

        }
    }
</script>

<style scoped>
    .gray-text {
        color: #BEC2C9;
        font-size: 28px;
    }
    .banners{
        width:100%;
    }
    .banners-image {
        width: 100%;
        height: auto;
    }
</style>
